<template>
  <page-main>
    <template #right>
      <!-- <el-button type="default" icon="download" @click="handleExport('分配记录','/admin/settlementRecord/export', {})">导出</el-button> -->
    </template>
    <el-form :inline="true" :model="form" label-width="80" class="search-form">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item label="日期：">
            <my-date-range ref="refMyDateRange" v-model:start="searchForm.startDate" v-model:end="searchForm.endDate" type="daterange" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-descriptions :column="3" border direction="vertical" class="mb-4">
      <el-descriptions-item label="男">{{ tableData.genderRatio.male || 0 }}%</el-descriptions-item>
      <el-descriptions-item label="女">{{ tableData.genderRatio.female || 0 }}%</el-descriptions-item>
      <el-descriptions-item label="未知">{{ tableData.genderRatio.weiZhi || 0 }}%</el-descriptions-item>
      <!-- <el-descriptions-item label="总数">{{ tableData.total }}</el-descriptions-item> -->
    </el-descriptions>
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.geoDistribution"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="地区名" prop="regionName"/>
          <el-table-column label="地区编码" prop="regionCode"/>
          <el-table-column label="数量" prop="count"/>
        </el-table>
  </page-main>
</template>

<script setup lang="ts">
import {dayjs} from 'element-plus';
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refTable = ref();
let searchForm = reactive({
  startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
  endDate: dayjs().format('YYYY-MM-DD')
});
let tableData = reactive({
  loading: false,
  total: 0,
  genderRatio: {},
  geoDistribution: [],

})
const getList = () => {
  tableData.loading = true;
  proxy.$request('get', '/admin/statistics/userGuildMember', searchForm, (data,msg) => {
    proxy.$util.resetForm(tableData, data);
    tableData.loading = false;
  },msg => {
    tableData.loading = false;
  })
}
onMounted(async () => {
  getList()
  
})
</script>

<style>

</style>